<template>
  <div :id="chartId"></div>
</template>

<script>
  import G2 from '@antv/g2';

  export default {
    props: {
      height: {
        type: Number,
        default: 360
      }
    },
    data() {
      return {
        chartId: 'chart' + +new Date() + ((Math.random() * 1000).toFixed(0) + ''),
        chartData: [{
          "date": "2012-09",
          "buyin": 7228
        }, {
          "date": "2012-10",
          "buyin": 7425
        }, {
          "date": "2012-11",
          "buyin": 7214
        }, {
          "date": "2012-12",
          "buyin": 7003
        }, {
          "date": "2013-01",
          "buyin": 6628
        }, {
          "date": "2013-02",
          "buyin": 6198
        }, {
          "date": "2013-03",
          "buyin": 5669
        }, {
          "date": "2013-04",
          "buyin": 5640
        }, {
          "date": "2013-05",
          "buyin": 5795
        }, {
          "date": "2013-06",
          "buyin": 5229
        }, {
          "date": "2013-07",
          "buyin": 4784
        }, {
          "date": "2013-08",
          "buyin": 4833
        }, {
          "date": "2013-09",
          "buyin": 4887
        }, {
          "date": "2013-10",
          "buyin": 4694
        }, {
          "date": "2013-11",
          "buyin": 4583
        }, {
          "date": "2013-12",
          "buyin": 4400
        }, {
          "date": "2014-01",
          "buyin": 4287
        }, {
          "date": "2014-02",
          "buyin": 3972
        }, {
          "date": "2014-03",
          "buyin": 4128
        }, {
          "date": "2014-04",
          "buyin": 3370
        }, {
          "date": "2014-05",
          "buyin": 3224
        }, {
          "date": "2014-06",
          "buyin": 3077
        }, {
          "date": "2014-07",
          "buyin": 2912
        }, {
          "date": "2014-08",
          "buyin": 2800
        }, {
          "date": "2014-09",
          "buyin": 2680
        }, {
          "date": "2014-10",
          "buyin": 2635
        }, {
          "date": "2014-11",
          "buyin": 2490
        }, {
          "date": "2014-12",
          "buyin": 2394
        }, {
          "date": "2015-01",
          "buyin": 2313
        }, {
          "date": "2015-02",
          "buyin": 2350
        }, {
          "date": "2015-03",
          "buyin": 2293
        }, {
          "date": "2015-04",
          "buyin": 2201
        }, {
          "date": "2015-05",
          "buyin": 2287
        }, {
          "date": "2015-06",
          "buyin": 2949
        }, {
          "date": "2015-07",
          "buyin": 2823
        }, {
          "date": "2015-08",
          "buyin": 3758
        }, {
          "date": "2015-09",
          "buyin": 3978
        }, {
          "date": "2015-10",
          "buyin": 4044
        }, {
          "date": "2015-11",
          "buyin": 4250
        }, {
          "date": "2015-12",
          "buyin": 4199
        }, {
          "date": "2016-01",
          "buyin": 4621
        }, {
          "date": "2016-02",
          "buyin": 4853
        }, {
          "date": "2016-03",
          "buyin": 4956
        }, {
          "date": "2016-04",
          "buyin": 4958
        }, {
          "date": "2016-05",
          "buyin": 5119
        }, {
          "date": "2016-06",
          "buyin": 5456
        }, {
          "date": "2016-07",
          "buyin": 5557
        }, {
          "date": "2016-08",
          "buyin": 5650
        }, {
          "date": "2016-09",
          "buyin": 6061
        }, {
          "date": "2016-10",
          "buyin": 6291
        }, {
          "date": "2016-11",
          "buyin": 6688
        }, {
          "date": "2016-12",
          "buyin": 6774
        }, {
          "date": "2017-01",
          "buyin": 7224
        }, {
          "date": "2017-02",
          "buyin": 7433
        }, {
          "date": "2017-03",
          "buyin": 7581
        }, {
          "date": "2017-04",
          "buyin": 7920
        }, {
          "date": "2017-05",
          "buyin": 8476
        }, {
          "date": "2017-06",
          "buyin": 8559
        }, {
          "date": "2017-07",
          "buyin": 8872
        }, {
          "date": "2017-08",
          "buyin": 8441
        }, {
          "date": "2017-09",
          "buyin": 9182
        }, {
          "date": "2017-10",
          "buyin": 9283
        }, {
          "date": "2017-11",
          "buyin": 9418
        }, {
          "date": "2017-12",
          "buyin": 9550
        }, {
          "date": "2018-01",
          "buyin": 9758
        }, {
          "date": "2018-02",
          "buyin": 9840
        }]
      }
    },
    mounted() {
      this.createChart(this.chartId, this.chartData);
    },
    methods: {
      createChart(container, data) {
        const TICKS = ["2012-09", "2013-05", "2014-01", "2014-09", "2015-05", "2016-01", "2016-09", "2017-05",
          "2018-02"
        ];
        var chart = new G2.Chart({
          container: container,
          forceFit: true,
          height: this.height,
          background: {
            fill: "#fff"
          }
        });
        chart.source(data, {
          date: {
            ticks: TICKS
          }
        });
        chart.legend(false);
        chart.axis('buyin', false);
        chart.line().position('date*buyin');
        chart.point().position('date*buyin').size('date', val => {
          if (TICKS.indexOf(val) >= 0) {
            return 3;
          } else {
            return 0;
          }
        }).label('date*buyin', (date, buyin) => {
          if (TICKS.indexOf(date) >= 0) {
            return buyin + '万';
          } else {
            return '';
          }
        }, {
          textStyle: {
            fill: '#7a7a7a',
            fontSize: 12,
            stroke: 'white',
            lineWidth: 2,
            fontWeight: 300
          }
        }).style({
          lineWidth: 2
        });
        chart.guide().line({
          top: true,
          start: ['2012-09', 5396],
          end: ['2018-02', 5396],
          lineStyle: {
            stroke: '#595959',
            lineWidth: 1,
            lineDash: [3, 3]
          },
          text: {
            position: 'start',
            style: {
              fill: '#8c8c8c',
              fontSize: 12,
              fontWeight: 300
            },
            content: '均值线 5,396万',
            offsetY: -5
          }
        });
        chart.render();

      },
    }
  }
</script>
